<template>
    <div class="container">
        <miao-header>
            <span slot="header">购物中心</span>
        </miao-header>
        <img class="loading" v-if="loading" src="../assets/pull.png" alt="">
        <app-loading :isHidLoading="isHidLoading"></app-loading>
        <div class="conScroll" ref="conScroll">
          <div class="conScrollDiv">
            <div class="containerBox"></div>
            <div class="store" v-if="storeShop&&(storeShop.length >0)">
              <div class="icon-start">
                <input type="checkbox" id="iptAll"
                       v-model="selectAll">
                <label for="iptAll">
                  <i :class="{'el-icon-circle-check':true}"></i>
                </label>
              </div>
              <div class="text-start">
                <p class="text-start-amount">1小时达
                  <span class="amount-text">
                      (共<span class="amount">{{totalNumber}}</span>件)
                    </span>
                </p>
                <p class="text-start-sever">已享受29元免运费</p>
              </div>
            </div>
            <div class="shopping" v-for="(item, key) in storeShop" :key="key">
              <div>
                <div class="icon-start">
                  <input type="checkbox" :id="key"
                         v-model="item.checked"
                         :checked="key">
                  <label :for="key">
                    <i :class="{'el-icon-circle-check':true}"></i>
                  </label>
                </div>
                <div class="shopping-img">
                  <img :src="item.pid.prodImage[0]" alt="">
                </div>
                <div class="shopping-title">
                  <p class="shopping-title-p">{{item.pid.prodSubTitle}}</p>
                  <div class="magnitude">
                    <span class="pcurrentPrice">￥{{item.pid.currentPrice}}</span><span>/件</span>
                    <div class="icon-magnitude">
                      <i class="el-icon-remove-outline" @click="subtractFn(item.pid._id,item.num,key)"></i>
                      <span>{{item.num}}</span>
                      <i class="el-icon-circle-plus-outline" @click="addFn(item.pid._id,item.num,key)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="containerBot"></div>
        </div>
        </div>
        <div class="goHome" v-if="isSelectAll">
          <img src="" alt="">
          <p>购物车还是空的,去首页看看~</p><br>
          <router-link class="shop" to="/home" tag="span">去首页看看</router-link>
        </div>
      <!--弹框-->
        <message :theme=messageTheme :message.sync="messageShow" >
          <span>您还没有选择的宝贝哦^_^</span>
        </message>
        <div class="fixed">
          <!--<span id="dot" v-if="totalNumber">{{totalNumber}}</span>-->
          <div class="price" v-if="storeShopPrice">
            <span>商品总价</span>
            <span class="price-foo">￥{{Number(select).toFixed(2)}}</span>
            <button :class="{'active':!select}" @click="payTheBill">去结算</button>
          </div>
          <miao-footer :highlight="$route.params.highlight"
                       :shoppingCart="$route.params.cartData"></miao-footer>
        </div>
    </div>
</template>

<script>
    export default {
        name: "cart",
        data() {
          return {
            storeShop:null,
            num:null,
            foo:0,
            messageTheme:2,
            isSelectAll:false,
            cartModel:[],
            totalNumber:0,
            isHidLoading:false,
            storeShopPrice:true,
            loading:null,
            messageShow:false
          }
        },
        created(){
          this.isHidLoading = true;
          this.storeShopPrice = false;
          this.$http.post('/api/cart').then((req)=>{
            req.data.code===-1&&(this.$router.push({name:'ringUp'}));
            req.data.data.length===0&&(this.isSelectAll = true);
            this.storeShop = req.data.data;
            this.storeShop&&(this.storeShop.forEach((item)=>{return this.totalNumber+=item.num}));
          });
        },
        mounted(){

          if(this.totalNumber>99){
            return this.totalNumber = 99;
          }
          this.$nextTick(()=>{
            new this.$BSscroll(this.$refs.conScroll,{
              //动画移动方向
              scrollY:true,
              //弹跳的方向
              bounce:{
                left:false,
                right:false,
                top:false,
                bottom:true
              },
              //动画速率
              momentum:true,
              click:true,
            })
          })
        },
        computed:{
        selectAll:{
          get(){
            return this.storeShop&&this.storeShop.every(item=>item.checked);
          },
          set(value){
            this.storeShop&&this.storeShop.map(item =>{item.checked = value;});
          }
        },
        select(){
          return this.storeShop&&(this.storeShop.filter(item=> item.checked)
            .reduce((prev,item)=>prev += item.num*item.pid.currentPrice,0));
        },
      },
        watch:{
          storeShop(){
            this.storeShop.length===0?(this.storeShopPrice = false):(this.storeShopPrice = true);
            this.isHidLoading = false;
            this.storeShop.length===0?(this.isSelectAll = true):(this.isSelectAll = false);
          }
        },
        methods:{
          subtractFn(pid, num, key){
            if(!this.totalNumber){
              return;
            }
            if(!this.loading===false){
              return
            }
            this.loading = true;
            this.$http.delete('/api/cart',{params:{pid:pid,}}).then(req=>{
              if(req.data.code===1){
                if(num===1){
                  this.loading = false;
                  this.totalNumber--;
                  this.storeShop.splice(key, 1);
                  return;
                }
                this.loading = false;
                this.totalNumber--;
                this.storeShop[key].num--;
              }
            })

          },
          addFn(pid,num,key){
            this.$http.put('/api/cart',{pid:pid,})
              .then(req=>{
              if(req.data.code === 1){
                this.storeShop[key].num++;
                this.totalNumber++;
              }
            });
          },
          payTheBill(){
            this.cartModel = this.storeShop.filter(item => item.checked);

            if(this.cartModel.length===0){
              this.messageShow = true;
              return;
            }
            this.isHidLoading = true;
            let goodsList = [];
            this.cartModel.forEach(item=>{
              goodsList.push({pid:item._id, num: item.num, price:item.pid.currentPrice, prodImg: item['pid']['prodImage'][0]});
            });

            this.$http.post('/api/order',{cartids:goodsList}).then(req=>{
              if(req.data.code === 1){
                this.$store.state.fillIn = this.cartModel;
                  this.$store.state.site = req.data.data.address;
                  this.$store.state.order = req.data.data._id;
                this.$router.push({name:'fillInOrder'});
              }
            })
          }
        },

    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .loading{
      display:inline-block;
      width:30px;
      margin-left: 15px;
      vertical-align: middle;
      position: absolute;
      top:47%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 9999;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
      0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes spin {
      0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    .container{
        width: 100vw;
        height: 100vh;
    }
    .shop{
        display: inline-block;
        width: 100%;
        height: 100px;
        color: white;
        font-size: 38px;
        background: linear-gradient(to left,#31e07c,#1cd245);
        border-radius: 10px;
        text-align: center;
        line-height: 100px;

        margin: 40px auto;
    }
    .goHome{
      display: inline-block;
      width: 60%;
      position: absolute;
      left: 50%;
      top:40%;
      transform: translate(-50%,-50%);
      margin: 0 auto;
      text-align: center;
    }
    .goHome>img{
      width: 400px;
    }
    .goHome>p{

      font-size: 32px;
      color: #898989;
    }
    #dot{
      display: inline-block;
      position: absolute;
      left:290px;
      bottom: 65px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: RGB(254,60,46);
      color: white;
      text-align: center;
      line-height: 35px;
      font-size: 12px;
      z-index: 9999;
    }
    .containerBox{
      height: 100px;
    }
    .containerBot{
      height: 300px;
     }
    .conScroll{
      height: 100vh;
      overflow-y: hidden;
    }
    .store{
      background: #f3f3f3;

    }
    .store>div{
      display: inline-block;
      font-size: 0;
      vertical-align: middle;
    }
    .el-icon-circle-check{
      font-size: 50px;
      color: #caccca;
      line-height: 100px;
      vertical-align: middle;
    }
    .icon-start{
      display: inline-block;
      box-sizing: border-box;
      width: 15%;
      text-align: center;
    }
    .icon-start>input[type=checkbox]{
      display: none;
    }
    .icon-start>input[type=checkbox]:checked+label>i{
      color: #6dd340;
    }
    .icon-start>.check{
      color: #6dd340;
    }
    .text-start{
      box-sizing: border-box;
      width: 80%;
    }
    .text-start-amount{
      font-size: 32px;
      color: #444444;
      font-weight: bold;
    }
    .text-start-amount>.amount-text{
      font-size: 30px;
    }
    .amount-text>.amount{
      font-size: 30px;
      font-weight: bold;
      color: #f3531c;
    }
    .text-start-sever{
      font-size: 28px;
      color: #797979;
    }
    .shopping{
      border-bottom: 1px solid #eee;
    }
    .shopping-img{
      width: 25%;
      display: inline-block;
      vertical-align: middle;
      padding: 20px 20px;
      box-sizing: border-box;
    }
    .shopping-img>img{
      height: 150px;
      max-width: 170px;
    }
    .shopping-title{
      display: inline-block;
      width: 55%;
      vertical-align: middle;
    }
    .shopping-title>p{
      color: #424242;
      margin-top: 20px;
      font-size: 32px;
      height: 85px;
      margin-bottom: 25px;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:2;
    }
    .magnitude{
      width: 99%;
      display: inline-block;
      margin-bottom: 26px;
    }
    .icon-magnitude{
      display: inline-block;
      float: right;
    }
    .icon-magnitude>i{
      font-size: 48px;
    }
    .icon-magnitude>span{
      display: inline-block;
      width: 90px;
      height: 46px;
      line-height: 50px;
      text-align: center;
      color: #292929;
      border: 1px solid #d9d9d9;
      vertical-align: middle;
      font-size: 28px;
      outline: none;
    }
    .magnitude>span{
      color: #878787;
      font-size: 30px;
    }
    .magnitude>.pcurrentPrice{
      color: #f4541d;
      font-size: 32px;
    }
    .el-icon-remove-outline{
      color: #32ca2d;
      vertical-align: middle;
    }
    .el-icon-circle-plus-outline{
      color: #32ca2d;
      vertical-align: middle;
    }
    .fixed{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .price{
      box-sizing: border-box;
      width: 100vw;
      height: 100px;
      background: #f9f9f2;
      line-height: 100px;
      padding: 0 20px;
      margin-bottom: 100px;
    }
    .price>span{
      font-weight: bold;
      color: #444444;
      font-size: 32px;
    }
    .price>.price-foo{
      color: #f0531b;
      font-size: 33px;
    }
    .price>.active{
      background: linear-gradient(to left,#31e07c,#1cd245);
    }
    .price>button{
      width: 180px;
      height: 65px;
      margin-top: 17px;
      border-radius: 33px;
      border: none;
      outline: none;
      background: linear-gradient(to left,#31e07c,#1cd245);
      color: #fff;
      font-size: 32px;
      float: right;
    }
</style>
